<template>
    <a-card class="settings-card" title="商家信息设置">
      <div class="avatar-container">
        <a-avatar size="100" :src="businessInfo.avatar" />
        <a-upload
          class="avatar-upload"
          :show-upload-list="false"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <a-button icon="upload">更换头像</a-button>
        </a-upload>
      </div>
      <a-form @submit.prevent="handleSubmit">
        <div class="form-item">
          <a-form-item label="商家姓名" class="form-label">
            <a-input v-model:value="businessInfo.username" placeholder="请输入商家姓名" class="input-field" />
          </a-form-item>
        </div>
        <div class="form-item">
          <a-form-item label="电话号码" class="form-label">
            <a-input v-model:value="businessInfo.phone" placeholder="请输入电话号码" class="input-field" />
          </a-form-item>
        </div>
        <div class="form-item">
          <a-form-item label="住址" class="form-label">
            <a-input v-model:value="businessInfo.address" placeholder="请输入住址" class="input-field" />
          </a-form-item>
        </div>
        <div class="form-item">
          <a-form-item label="商家自述" class="form-label">
            <a-input v-model:value="businessInfo.caption" placeholder="请输入商家自述" class="input-field" />
          </a-form-item>
        </div>
        <div class="button-group">
          <a-button type="primary" html-type="submit">确定</a-button>
          <a-button @click="handleCancel">取消</a-button>
        </div>
      </a-form>
    </a-card>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import request from '../../../util/request';

  export default {
    name: 'BusinessInfoEditor',
    setup() {

      const router = useRouter();

      const businessInfo = ref({
        avatar: 'https://via.placeholder.com/100',
        username: '',
        phone: '',
        address: '',
        caption: '',
      });

      onMounted(() => {
        request.post('/account/get', {
          userid: sessionStorage.getItem('userid'),
          role: 'business',
        }).then(res => {
          businessInfo.value = res.data;
        }).catch(err => {
          message.error("获取商家信息失败: ", err);
        })
      });

      const handleSubmit = () => {
        request.post('/account/edit', {
          userid: sessionStorage.getItem('userid'),
          role: 'business',
          username: businessInfo.value.username,
          phone: businessInfo.value.phone,
          address: businessInfo.value.address,
          caption: businessInfo.value.caption,
        }).then(res => {
          if(res.data.flag === 'success') {
            message.success("修改商家信息成功");
            router.push({ name: 'BusInfoViewer' });
          } else {
            message.error("修改商家信息失败: ", res.data);
          }
        }).catch(err => {
          message.error("修改商家信息失败: ", err);
        })
      };
      
      const handleCancel = () => {
        router.push({ name: 'BusInfoViewer' });
      };

      const beforeUpload = (file) => {
        const isImage = file.type.startsWith('image/');
        if (!isImage) {
          message.error('只能上传图片文件！');
        }
        return isImage;
      };

      const handleChange = (info) => {
        message.success('头像更换成功！');
      };

      return {
        businessInfo,
        handleSubmit,
        handleCancel,
        beforeUpload,
        handleChange,
      };
    },

  }
  //   data() {
  //     return {
  //       businessInfo: {
  //         avatar: 'https://via.placeholder.com/100',
  //         name: '李四',
  //         phone: '13900000000',
  //         address: '上海市浦东新区某街道，邮政编码：200000',
  //         description: '欢迎光临我的商店，提供优质的商品和服务。',
  //       },
  //     };
  //   },
  //   methods: {
  //     beforeUpload(file) {
  //       const isImage = file.type.startsWith('image/');
  //       if (!isImage) {
  //         this.$message.error('只能上传图片文件！');
  //       }
  //       return isImage;
  //     },
  //     handleChange(info) {
  //       if (info.file.status === 'done') {
  //         this.businessInfo.avatar = info.file.response.url; // 假设服务器返回头像URL
  //         this.$message.success('头像更换成功！');
  //       } else if (info.file.status === 'error') {
  //         this.$message.error('头像更换失败！');
  //       }
  //     },
  //     handleSubmit() {
  //       // 提交修改的逻辑
  //       console.log('提交信息:', this.businessInfo);
  //       this.$message.success('信息修改成功！');
  //     },
  //     handleCancel() {
  //       // 取消修改的逻辑
  //       this.$message.info('已取消修改');
  //       this.$router.push({ name: 'BusInfoViewer' });
  //     },
  //   },
  // };
  </script>
  
  <style scoped>
  .settings-card {
    max-width: 400px; /* 拓宽卡片 */
    margin: 20px auto; /* 居中显示 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .avatar-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-bottom: 20px; /* 头像与表单之间的间距 */
  }
  
  .avatar-upload {
    margin-left: 20px; /* 上传按钮与头像之间的间距 */
  }
  
  .form-item {
    display: flex;
    align-items: center; /* 垂直对齐 */
    margin-bottom: 16px; /* 控件之间的间距 */
  }
  
  .form-label {
    flex: 0 0 120px; /* 固定 Label 的宽度 */
    text-align: left; /* Label 左对齐 */
  }
  
  .input-field {
    flex: 1; /* 文本框占据剩余空间 */
    min-width: 250px; /* 设置最小宽度 */
    margin-left: auto; /* 文本框框体右对齐 */
  }
  
  .button-group {
    display: flex;
    justify-content: space-between; /* 按钮之间的间距 */
    margin-top: 20px; /* 按钮与表单之间的间距 */
  }
  </style>
  